<template>
  <div class='container'>
    <!-- 标签管理-->
<el-card class="box-card">
  <!-- 一行表单 -->
<el-form :inline="true" :model="requestParameters"  ref="requestParameters" class="demo-form-inline">
<el-row  style="display:flex" >
  <el-col>
     <el-form-item label="标签名称" prop="tagName">
    <el-input v-model="requestParameters.tagName"
      @keyup.enter="handleFilter"
    ></el-input>

  </el-form-item>
     <el-form-item label="状态：" prop="state">
                  <el-select
                    class="filter-item"
                    style="width: 100px;"
                    v-model="requestParameters.state"
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
    <el-form-item>
    <el-button  @click="resetForm">清除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"   @click="handleFilter">搜索</el-button>
  </el-form-item>
   </el-col>
   <el-form-item    >
  <el-button  type="success" class="el-icon-edit"    @click="handleChange('add')">新增标签</el-button>
  </el-form-item>
</el-row>
<!-- <el-row>
   <el-col :span="24"><div class="row-bg">
    <i class="el-icon-info"></i>
    <span> 数据一共11条</span>
  </div></el-col>
</el-row> -->
</el-form>
 <el-alert
 v-if="alertText !== ''"
 :title="alertText"
 type="info"
 class="alert"
:closable="false"
show-icon
>
</el-alert>
  <!-- 数据列表 -->
        <el-table
          :data="dataList"
          style="width: 100%"
        >
          <el-table-column  label="序号" type="index">
            <!-- <template slot-scope="scope"> -->
              <!-- <span>{{scope.row.id}}</span> -->
            <!-- </template> -->
          </el-table-column>
          <el-table-column  label="所属学科">
            <template slot-scope="scope">
              <span>{{scope.row.subjectName}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="标签名称">
            <template slot-scope="scope">
              <span>{{scope.row.tagName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建者">
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="创建日期"
            width="240"
           prop="addDate"
           :formatter="addDateFormatter"
          >
            <!-- <template slot-scope="scope">
              <span>{{scope.row.addDate}}</span>
            </template> -->
          </el-table-column>

            <el-table-column label="状态"  >
            <template slot-scope="scope">
              <!-- <span v-if="scope.row.state==1" >启用</span>
              <span v-else>禁用</span> -->
              {{scope.row.state===0 ? '已禁用':'已启用'}}
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="240"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">

              <el-button   type="text"   @click="handleStatus(scope.row)" >
                <!-- <span v-if="scope.row.state==0">启用</span>
                <span v-else>禁用</span> -->
                   {{scope.row.state===1 ? '禁用':'启用'}}
              </el-button>
               <el-button   type="text" @click="handleChange(scope.row.id)" :disabled="scope.row.state ===1" >修改</el-button>
              <el-button   type="text"  @click="removeInfo(scope.row.id)"  :disabled="scope.row.state ===1"

               v-if="scope.row.status!='deleted'"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages"
          align: right
          >
            <el-col align="right">
              <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[10,20,30, 50]"
              layout=" prev, pager, next,sizes, jumper"
            ></el-pagination>
            </el-col>
          </div>
        </div>
        <!-- end -->
  </el-card>
  <!-- 新增标签弹层 -->
  <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
   @close="btnCancel"
  >
  <el-form  :model="formData" ref="perForm" label-width="100px"  :rules="rules"  >
  <el-form-item
    label="所属学科"
    prop="subjectID"
  >
    <el-select  v-model="formData.subjectID"  label-width="30px" style="width:60%"  placeholder="请选择"  >
     <el-option v-for="item in subjectID" :key="item.id" :label="item.subjectName" :value="item.id" />
    </el-select>
  </el-form-item>
  <el-form-item
    label="目录名称"
    prop="tagName"
  >
    <el-input v-model="formData.tagName"  style="width:60%"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
     <el-button  @click="btnCancel" >取 消</el-button>
    <el-button type="primary"  @click="btnOK">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { list as lists } from '@/api/hmmm/subjects'
import { status } from '@/api/hmmm/constants'

import {
  list,
  detail,
  remove,
  add,
  update,
  changeState
} from '@/api/hmmm/tags'
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      subjectID: [],
      dataList: [],
      total: null,
      alertText: '',
      page: {
        page: 1, // 当前页码
        size: 10,
        total: 0 // 总数
      },
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      formData: {
        subjectID: '',
        tagName: ''
      },
      // 校验
      rules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      state: '',
      // 弹层
      dialogVisible: false,
      // 标题
      title: '',
      // 路由跳转
      subID: this.$route.query.id
    }
  },
  created () {
    this.getList()
    this.getsimpleList()
  },
  computed: {
    status () {
      return status
    }
  },

  methods: {
    // 初始数据
    // 获取列表数据
    async getList (params) {
      this.listLoading = true
      // const { data: res } = await list(this.requestParameters);
      const { data: res } = await list({ subjectID: this.subID, ...this.requestParameters })
      // 获取数据给dataList
      // console.log(res);
      this.dataList = res.items
      this.total = res.counts
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 学科列表
    async getsimpleList () {
      const { data: ress } = await lists(this.requestParameters)
      this.subjectID = ress.items
    },
    // 设置时间
    addDateFormatter (row) {
      const addDate = row.addDate
      if (addDate) {
        return addDate.replace(/[a-zA-Z]+/g, ' ').split('.000')
      }
    },
    // 重置
    resetForm () {
      this.$refs.requestParameters.resetFields()
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 删除
    removeInfo (info) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: info })
            .then((response) => {
              this.$message.success('成功删除了用户' + '!')
              this.dataList.splice(info, 1)
              this.getList(this.requestParameters)
            })
            .catch((response) => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 添加、编辑之后清空表单
    query () {
      this.formData = {}
    },
    // 新增、编辑用户
    handleChange (id) {
      this.query()
      this.dialogVisible = true
      if (id === 'add') {
        this.title = '新增目录'
      } else {
        this.title = '修改目录' // 给弹层传参
        this.hanldeEditForm(id)
      }
    },

    // 表单详情数据加载
    async hanldeEditForm (objeditId) {
      this.formData.id = objeditId
      const { data: res } = await detail({ id: objeditId })
      // 获取详情 给formData
      this.formData = res
    },
    btnOK () {
      this.$refs.perForm
        .validate()
        .then(() => {
          if (this.formData.id) {
            return update(this.formData)
          }
          return add(this.formData)
        })
        .then(() => {
          this.$message.success('操作成功')
          this.getList()
          this.dialogVisible = false
        })
    },
    btnCancel () {
      this.dialogVisible = false
    },
    // 启用、禁用
    async handleStatus (data) {
      // console.log(data.state);

      if (data.state === 0) {
        data.state = 1
      } else {
        data.state = 0
      }
      await changeState(data)
      this.getList(this.requestParameters)
    }
  }
}
</script>

<style scoped >
.row-bg {
  padding: 10px 15px;
  background-color: #f9fafc;
  border-radius: 4px;
}
</style>
